<template>
    <div class="login">
        <!--nav-->
        <div class="nav">
          <Nav></Nav>
        </div>
        <!--form-->
        <div class="form">
          <span style="margin-left: 150px;font-size: 20px;color: rgba(31,160,255,0.94)">后 台 登 录 界 面</span>
          <el-form status-icon :model="User" ref="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm">
            <el-form-item label="账号：" prop="username" label-width="120px">
              <el-input style="width: 240px" v-model="User.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="password" label-width="120px">
              <el-input style="width: 240px" type="password" v-model="User.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="width: 120px" @click="submitForm('ruleForm')">登录</el-button>
              <el-button style="width: 120px;margin-left: 50px">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--footer-->
        <div class="footer">
          <Footer></Footer>
        </div>
    </div>
</template>

<script>
  import Nav from "../../components/Nav";
  import Footer from "../../components/Footer";
    export default {
      name: "Login",
      data(){
        return{
          User: {
            username: '', // 用户账号
            password: '', // 用户密码
          },
          rules: {
            username: [
              {required: true, message: '请输入账号名称', trigger: 'blur'},
              {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
            ],
            password: [
              {required: true, message: '请输入密码', trigger: 'blur'},
            ]
          },
        }
      },
      methods:{
        /*登录*/
        submitForm(formName) {
          this.$refs[formName].validate(async (valid) => {
            if (valid) {
              if (!this.User.username) {alert('请输入账号');return false}
              if (!this.User.password) {alert('请输入密码');return false}
              let _this = this
              this.$axios.post("http://localhost:8066/user/admin", this.User).then(function (res) {
                //清空本次保存数据
                if (res.data != -1) {
                  localStorage.setItem("admin", _this.User.username)
                  alert("登录成功！")
                  _this.User = {};
                  _this.$router.push({name:'Admin'});
                } else {
                  alert("账号或密码错误！");
                  _this.User = {};
                }
              }).catch(function (err) {
                localStorage.removeItem('admin')
                alert("登陆失败！");
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
      },
      components:{
        Nav,
        Footer
      },

    }
</script>

<style scoped>
  .demo-ruleForm{
    margin-top: 20px;
  }
  .form{
    padding: 20px;
    margin-top: 100px;
    margin-left: 550px;
    width: 500px;
    height: 270px;
    border-radius: 5px;
    border: 1px solid;
  }
</style>
